<template>
    <div :class="['chat-header', { 'collapsed': isCollapsed }]">
        <div class="chat-header-center">
            <el-icon class="el-icon">
                <ChatLineRound />
            </el-icon>
            Introducing Claude, AI Assistamt
            <el-icon class="el-icon"><ArrowDown /></el-icon>
        </div>
        <div class="chat-header-right">
            <el-button type="primary" circle>
                <el-icon class="el-icon">
                <Star />
            </el-icon></el-button>
            <el-button type="primary" circle>
                <el-icon class="el-icon">
                <Operation />
            </el-icon></el-button>
            <el-button type="primary" circle>
                <el-icon class="el-icon">
                <ZoomIn />
            </el-icon>
            </el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { ChatLineRound, Star, Operation, ZoomIn } from "@element-plus/icons-vue";
import { ref, computed } from "vue";
import { useStore } from 'vuex';

export default {
    name: 'ChatHeader',
    components: {
        ChatLineRound,
        Star,
        Operation,
        ZoomIn
    },
    setup() {
        const store = useStore();
        // 获取 Vuex store 中的 isCollapsed 状态
        const isCollapsed = computed(() => store.getters.isCollapsed);

        // 导航函数
        const navigateToHome = () => {
            console.log('Navigating to Home');
        };
        const navigateToSettings = () => {
            console.log('Navigating to Settings');
        };
        const navigateToMessages = () => {
            console.log('Navigating to Messages');
        };
        const logout = () => {
            console.log('Logging out');
        };

        // 返回模板中需要使用的变量和方法
        return {
            isCollapsed,
            navigateToHome,
            navigateToSettings,
            navigateToMessages,
            logout,
        };
    },
};
</script>

<style scoped>
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background-color: #333; 
    color: white;
    width: 100%;
}

.chat-header.collapsed {
    width: calc(100vw - 100px);
}

.chat-header-center {
    font-size: 14px;
    flex: 1;
    /* 使左侧内容占据剩余空间并居中 */
    text-align: center;
    /* 居中 */
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.chat-header-right {
    font-size: 14px;
    text-align: right;
    /* 右对齐 */
    width: 150px;
    padding-right: 1vw;
}


svg {
    width: 15px;
    height: 15px;
    margin: 0 10px;
    color: white;
}

.chat-header-right button[type='button'] {
    padding: 8px 16px;
    background-color: #f5a623;
    border-radius: 20px;
    font-weight: 500;
}

.chat-header-right button[type='button']:hover {
    background-color: #f39c12;
}

.chat-header-right button {
    padding: 8px 16px;
    background-color: #f5a623;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.chat-header-right button:hover {
    background-color: #f39c12;
}


:deep(.el-button) {
    transition: all 0.3s ease;
}

:deep(.el-button--primary) {
    background-color: #409eff;
    border-color: #409eff;
}

:deep(.el-button--info) {
    background-color: #909399;
    border-color: #909399;
}

:deep(.el-button:hover) {
    opacity: 0.9;
    transform: scale(1.05);
}

</style>